<template>
    <div>
        <!--左侧博文部分-->
        <div class="col-md-9">
            <div class="article-list">
                <article class="article" v-for="(a,index) in articlePager" :key="index">
                    <h4 class="title"><a :href="'/pDetails?aid='+a.aid">{{a.title}}</a></h4>
                    <p class="article-review clearfix"><span>{{a.catalogName}}</span><span>{{a.createTime}}</span> <span
                            class="num"><span class="glyphicon glyphicon-eye-open" title="阅读"></span> {{a.browseNumber}}</span></p>
                    <p class="article-text">{{a.summary}}</p>
                    <div><a :href="'/pDetails?aid='+a.aid+'&catalog='+a.catalog"><span class="btn btn-default">查看详情</span></a></div>
                </article>
            </div>

            <div id="article_pager1">
                <!--引入elementui的分页组件，前端实现的分页-->
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :pager-count="15"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :total="articleList.length">
                </el-pagination>
            </div>
            <br>
        </div>
        <!--右侧广告部分-->
        <div class="col-md-3 clearfix">
            <div class="blog-unit">
                <div class="blog-unit-title">关于博客</div>
                <hr>
                <div class="blog-unit-content">
                    这是我的个人技术博客，主要记录和总结教学和工作中常用的知识及我的生活。
                </div>
            </div>
            <div class="blog-unit">
                <div class="ad">
                    300x300

                </div>
            </div>
            <div class="blog-unit hot-article">
                <div class="blog-unit-title">热门文章</div>
                <hr>
                <div class="blog-unit-content ">
                    <ul>
                        <li><a href="/blog/html/25" title="HTML转义字符对照表"><span class="number0">1</span>HTML转义字符对照表</a></li>
                        <li><a href="/blog/javascript/19" title="HTML data-* 属性"><span class="number1">2</span>HTML data-*
                            属性</a></li>
                        <li><a href="/blog/javascript/32" title="JavaScript 运算符&表达式"><span class="number2">3</span>JavaScript
                            运算符&表达式</a></li>
                        <li><a href="/blog/javascript/34" title="JavaScript switch 语句"><span class="number3">4</span>JavaScript
                            switch 语句</a></li>
                        <li><a href="/blog/javascript/16" title="JavaScript 简介"><span class="number4">5</span>JavaScript
                            简介</a>
                        </li>
                        <li><a href="/blog/javascript/42" title="详解 js 跨域"><span class="number5">6</span>详解 js 跨域</a></li>
                        <li><a href="/blog/javascript/29" title="JavaScript 注释"><span class="number6">7</span>JavaScript
                            注释</a>
                        </li>
                        <li><a href="/blog/javascript/39" title="JavaScript 函数参数&Arguments"><span class="number7">8</span>JavaScript
                            函数参数&Arguments</a></li>
                    </ul>
                </div>
            </div>
            <div class="blog-unit links">
                <div class="blog-unit-title">友情链接</div>
                <hr>
                <div class="blog-unit-content ">
                    <ul class="clearfix">
                        <li class="col-md-6"><a href="http://www.jq22.com/" title="jquery插件库">jquery插件库</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "BlogListContainer",
        data(){
            return{
                pageSize: 8,
                currentPage: 1,

                articleList:[]
            }
        },
        computed: {
            articlePager: function () {
                return this.articleList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            }
        },
        mounted(){
            //this.refreshArticleList('all');
        },
        methods:{
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
            refreshArticleList(catalogId){
                this.$store.dispatch("QueryArticlesByCatalog",catalogId).then(response => {

                    let code = response.data.code;
                    if (code === 200) {
                        this.articleList = response.data.data;

                    } else if (code === 400) {
                        this.articleList=[];
                    }
                })
                .catch(() => {
                        //this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css";
    @import "../../assets/minified_css/index-header.min.css";
    @import "../../assets/minified_css/index.min.css";
    @import "../../assets/minified_css/blog/index.min.css";
    @import "../../assets/minified_css/index-footer.min.css";
</style>